@import '../../theme.scss';
@import '../../mixin.scss';

/* 数据表格 */
.table-box {
  margin: 0 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
.table {
  width: 100%;
  position: relative;
  font-size: 16px;
  @include noselect();

  thead {
    tr {
      position: sticky;
      top: 0;
      background-color: $theadBackground;
      font-size: 14px;
    }
    td {
      font-weight: normal;
      border-color: transparent;
      padding-top: 8px;
      padding-bottom: 8px;
      color: $theadTextColor;
      &:first-child {
        border-radius: 5px 0 0 0;
      }
      &:last-child {
        border-radius: 0 5px 0 0;
      }
    }
  }

  td {
    padding: 3px 0px;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    vertical-align: middle;
    border-bottom: solid 1px $tableBorderColor;
    &:nth-child(1) {
      text-align: center;
    }
  }

  tbody {
    &.empty {
      &::before {
        position: absolute;
        content: '暂无数据，开启系统代理再试试';
        top: 100px;
        left: 50%;
        color: rgb(131, 145, 146);
        font-size: 24px;
        transform: translateX(-50%);
      }
    }
    tr {
      color: $trTextColor;
      &:hover {
        cursor: pointer;
        outline: solid 1px #888;
      }
      &.matched {
        color: $matchedTextColor;
        border-color: transparent;
        font-weight: bold;
        * {
          color: $matchedTextColor !important;
        }
      }
      &.active {
        background: $tableActiveColor;
      }
      &.error {
        color: $errorTextColor;
        * {
          color: $errorTextColor !important;
        }
        :nth-child(1) {
          color: $errorTextColor;
        }
        .contentType {
          > span {
            color: #fff;
          }
        }
      }
      &.highlight {
        color: $highlightTextColor;
        font-weight: bold;
        .host {
          color: $highlightTextColor;
        }
      }
    }
  }

  .status {
    width: 40px;
    text-align: center;
    text-align: center;
    &.s200,
    &.s101 {
      color: $httpStatus200;
    }
    &.s304 {
      color: $httpStatus304;
    }
  }
  .method {
    width: 70px;
    text-transform: lowercase;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    color: #999;
    &.GET,
    &.get {
      font-weight: normal;
      color: #666;
    }
  }
  .protocol {
    width: 60px;
    text-align: center;
  }
  .host {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    font-weight: bold;
    color: #999;
  }
  .path {
    .textLimit {
      span {
        &:nth-child(2) {
          font-weight: bold;
        }
      }
    }
  }
  .size {
    width: 70px;
  }
  .contentType {
    width: 110px;
    font-size: 14px;
    > * {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      border-radius: 3px;
    }
    .html,
    .xml {
      background-color: #0276ff;
      color: #fff;
    }
    .javascript {
      background-color: #fff000;
      color: #000;
    }
    .css {
      background-color: #ea4c89;
      color: #fff;
    }
    .json {
      background-image: linear-gradient(-180deg, #00d775, #00bd68);
      color: #fff;
    }
    .jpeg,
    .jpg,
    .png,
    .gif,
    .icon,
    .svg,
    .webp {
      background-color: rgb(72, 201, 176);
      background-color: rgb(17, 120, 100);
      background-color: #fa6400;
      color: #fff;
    }
    .stream {
      background-color: rgb(195, 155, 211);
      color: #fff;
    }
    .bproxy {
      background-image: linear-gradient(#464d55, #25292e);
      color: #fff;
      box-shadow: rgb(0 1 0 / 20%) 0 2px 8px;
      opacity: 0.85;
    }
    .plain,
    .flv,
    .p2p {
      background-color: #f8f9fa;
      color: #3c4043;
    }
    .font,
    .woff,
    .woff2 {
      background-color: #fbeee0;
      color: #422800;
    }
  }
  .speed {
    width: 80px;
    &.slow {
      color: red;
    }
  }
  .ip {
    width: 150px;
    &:hover {
      color: $hoverColor;
    }
  }
}

.table-box .loading {
  text-align: center;
  color: #ccc;
  height: 4px;
  background-color: #222;
  &.lock {
    background-color: #000;
  }
}

.empty-tip {
  text-align: center;
  font-size: 15px;
  color: #999;
  padding: 20px 0;
  span {
    color: rgb(241, 196, 15);
    padding: 0 5px;
  }
}

@media screen and (max-width: 1325px) {
  .table {
    td {
      &:nth-last-child(1) {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 1170px) {
  .table {
    td {
      &:nth-last-child(2) {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 1066px) {
  .table {
    td {
      &:nth-last-child(3) {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 980px) {
  .table {
    td {
      &:nth-last-child(4) {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 850px) {
  .table {
    td {
      &:nth-child(3) {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 775px) {
  .table {
    td {
      &:nth-child(2) {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 690px) {
  .table {
    td {
      &:nth-child(1) {
        display: none;
      }
      &.host {
        width: 40%;
      }
    }
  }
}
